<template>
    <div>
        <div class="khead">
            <van-cell-group>
                <van-field  class="inp" v-model="value" placeholder="请输入用户名" />
                
            </van-cell-group>
            <van-icon name="search" class="search"/>
            <div class="box swiper-inner">
                <swiper :options="swiperOption">
                    <swiper-slide v-for="(item,i) in viewpager" :key="i"><img :src="item.picPath" alt=""></swiper-slide>
                    
                </swiper>
            </div>
            
                <div class="nav">
                    <!-- <a href="javascript:;" @click="tonutrition">食谱</a> -->
                    <router-link to="/recipe" tag="a">食谱</router-link>
                    <router-link to="/nutrition" tag="a">百科</router-link>
                    <router-link to="/answer" tag="a">问答</router-link>
                </div>
        </div>
        <div class="blurb">
             <van-card
                v-for="(item,i) in message"
                :price="item.readcount"  
                :title="item.content"
                :thumb="item.imgpath"
                :key='i'
                currency=''
            />
       
        </div>
   
    
    </div>
</template>

<script>
import axios from 'axios'
    export default {
        name:'Kit',
         data() {
            return {
              viewpager:[
              ],
            value:'',
            message:[],
             swiperOption: {
            effect: 'coverflow',
            grabCursor: true,
            centeredSlides: true,
            slidesPerView: 'auto',
            initialSlide :2,
            coverflowEffect: {
                rotate: 50,
                stretch: 2,
                depth: 100,
                modifier: 1,
                slideShadows : true,
                
            },
            }
        }   
        },
        methods:{
            //主图点击事件
            leftimg(){
                let box = document.querySelector('.center')
                box.style.WebkitTransform = "translate(280px)"
            },
            rightimg(){
                let box = document.querySelector('.center')
                box.style.WebkitTransform = "translate(-280px)"
            },
            tonutrition(){
                this.$router.push('/nutrition')
            }
        },
        //挂载完成时发起axios请求。
        mounted() {
            let that = this
            axios({
                url:'http://10.8.158.60:8080/silkBagPageContent/showPageContent',    
            }).then(function(data){
                that.message = data.data.msg
            }),
            axios({
                 url:'http://10.8.158.60:8080/picture/pictureall',
            }).then(function(data){
                that.viewpager = data.data.msg
            })
        },
    }
</script>

<style scoped>
    .khead{
        position: fixed;
        width: 100%;
        height: 276px;
        z-index: 9;
        background: #fff
    }
    .inp{
        width: 252px;
        height: 17px;
        border-radius: 10px;
        font-size: 14px;
        line-height: 20px;
        background: #F2F2F2;
        left: 60px;
        top: 5vw;
        
    }
    .box{
        
        height: 148px;
        position: relative;
        top: 8vw;
        overflow: hidden;
        font-size: 16px
    }
   
   .search{
       position: absolute;
       right: 40px;
       font-size: 16px
       
   }
   .nav{
       height: 24px;
       width: 100%;
       position: relative;
       top: 13vw;
       left: 0;
       display: flex;
       justify-content: space-around;
       font-size: 16px
   }
   .nav a{
       color: #646464
   }
   .blurb{
       position: relative;
       top: 276px;
       overflow: auto
   }
   .van-card{
       height: 150px;
       font-size: 16px;
       background: #F2F2F2;
       
       
   }
   .van-card__header{
       margin-top:30px;
       overflow: hidden;
   }
   .van-ellipsis{
       margin-top: 20px
   }
   .swiper-slide{
       width: 266px;
       height: 148px;
   }
   .swiper-slide img{
       width: 266px;
       height: 148px;
       border-radius: 10px
   }
</style>